<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="关闭"
    @ok="submit"
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="字典名称"
        >
          <a-input
            v-decorator="['name', validatorRules.name ]"
            placeholder="请输入字典名称"
          />
        </a-form-item>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="描述"
        >
          <a-input
            v-decorator="['value', validatorRules.value ]"
            placeholder="请输入描述"
          />
        </a-form-item>
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="部门排序"
        >
          <a-input-number
            v-decorator="['sort', validatorRules.sort ]"
            placeholder="请输入部门排序"
            :min="1"
            :max="999"
            style="width: 200px"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/system/dict';
import { Slime } from '@/mixins/slime';
export default {
  name: 'Dict',
  data() {
    return {
      title: '编辑',
      type: 0, // 0 添加 1 编辑
      confirmLoading: false,
      form: this.$form.createForm(this),
      id: null,
      validatorRules: {
        name: { rules: [{ required: true, message: '请输入字典名称!' }] },
        value: { rules: [{ required: true, message: '请输入描述!' }] },
        sort: { rules: [{ required: true, message: '请输入排序!' }] },
      },
    };
  },
  mixins: [Slime],
  methods: {
    // 增
    crudCreate() {
      this.visible = true;
      this.type = 0;
    },
    // 改
    crudUpdate(data) {
      console.log(data)
      this.visible = true;
      this.type = 1;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: data.name,
          value: data.value,
          sort: data.sort,
        });
      });
      this.deptPid = data.pid;
      this.id = data.id;
      data.pid === 0 ? (this.deptShow = false) : (this.deptShow = true);
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          const param = values;
          param.id = that.id;
          param.pid = that.deptPid;
          if (that.type === 0) {
            that.submitCreate(param);
          } else {
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree
        .create(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree
        .update(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields()
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>